<template>
    <div class="follow-page">
      <el-container>
        <!-- Sidebar -->
        <el-aside width="200px" class="sidebar">
          <h3>我的关注</h3>
          <el-menu :default-active="activeCategory" @select="handleCategorySelect" class="side-menu">
            <el-menu-item index="myfollow">我的关注<span class="count">{{ followList.length }}</span></el-menu-item>
            <el-menu-item index="myfans">关注我的<span class="count">{{ fansList.length }}</span></el-menu-item>
          </el-menu>
        </el-aside>
  
        <!-- Main Content: Follow List or Fans List -->
        <el-container>
          <FollowList
            v-if="activeCategory === 'myfollow'"
            :followList="followList"
            @unfollow="unfollowUser"
          />
          <FansList
            v-else-if="activeCategory === 'myfans'"
            :fansList="fansList"
            @followBack="followBack"
          />
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import axios from 'axios';
    import FansList from './fansList.vue';
    import FollowList from './followList.vue';
  import { useUserStore } from '@/stores/user';
  
  const userStore = useUserStore();
  const currentUserId = ref(userStore.userInfo.id);
  const followList = ref([]); // List of users the current user follows
  const fansList = ref([]); // List of users who follow the current user
  const activeCategory = ref('myfollow'); // Default active category
  
  // Fetch follow or fans list based on the active category
  onMounted(() => {
    fetchFollowList();
  });
  
  // Fetch follow list
  function fetchFollowList() {
    axios.get('/api/users/followList', { params: { userId: currentUserId.value } })
      .then((response) => {
        if (response.data.code === 200) {
          followList.value = response.data.data;
        } else {
          ElMessage.error('Failed to load follow list');
        }
      })
      .catch((error) => console.error('Error fetching follow list:', error));
  }
  
  // Fetch fans list
  function fetchFansList() {
    axios.get('/api/users/fanList', { params: { userId: currentUserId.value } })
      .then((response) => {
        if (response.data.code === 200) {
          fansList.value = response.data.data;
        } else {
          ElMessage.error('Failed to load fans list');
        }
      })
      .catch((error) => console.error('Error fetching fans list:', error));
  }
  
  // Handle category selection
  function handleCategorySelect(category: string) {
    activeCategory.value = category;
    if (category === 'myfollow') {
      fetchFollowList();
    } else if (category === 'myfans') {
      fetchFansList();
    }
  }
  
  // Unfollow user
  function unfollowUser(followId: number) {
    axios.post(`/api/users/unfollow?userId=${currentUserId.value}&followId=${followId}`)
      .then((response) => {
        if (response.data.code === 200) {
          followList.value = followList.value.filter((user) => user.id !== followId);
          ElMessage.success('已取消关注');
        } else {
          ElMessage.error(response.data.msg || '取消关注失败');
        }
      })
      .catch((error) => console.error('Error unfollowing user:', error));
  }
  
  // Follow back a fan
  function followBack(fanId: number) {
    axios.post(`/api/users/follow?userId=${currentUserId.value}&followId=${fanId}`)
      .then((response) => {
        if (response.data.code === 200) {
          ElMessage.success('回关成功');
        } else {
          ElMessage.error(response.data.msg || '回关失败');
        }
      })
      .catch((error) => console.error('Error following back user:', error));
  }
  </script>
  
  <style scoped>
  .follow-page {
    display: flex;
    width: 100%;
    margin: auto;
  }
  
  .sidebar {
    padding: 20px;
    background-color: var(--bPageBgColor);
  }
  
  .side-menu .el-menu-item {
    display: flex;
    justify-content: space-between;
  }
  
  .count {
    font-weight: bold;
    color:  var(--bTextColor);
  }
  </style>
  